{% comment %}
  渲染一个用于懒加载的视频模块

  Accepts:
  - pc_video: pc 端的视频链接
  - mob_video: mob 端的视频链接
  - unenable_autoplay: 不启用视频自动播放
  - class_name: video标签的样式

  Usage:
  {% render 'lazy-video'
    pc_video: section.settings.video_url.sources[1].url,
    mob_video: section.settings.mobile_video_url.sources[1].url
  %}

  Notes:
  该自定义标签只用于懒加载视频

  可扩展方向
    autoplay 可处理成参数
    pc mob 区分的断点可以处理成参数, 目前默认是 md 断点
{% endcomment %}

{%- liquid
  assign autoplay = 'autoplay'
  assign muted = 'muted'
  if unenable_autoplay
    assign autoplay = ''
    assign muted = ''
  endif
-%}

<lazy-video class="d-block h-100">
  <video
    loop playsinline webkit-playsinline {{ autoplay }} {{ muted }}
    poster="{{ desktop_poster | img_url: 'master' }}"
    class="as-video-pc w-100 h-100 object-fit-cover {{ class_name }} d-md-block d-none"
    data-pc-video="{% if pc_video %}{{ pc_video }}{% else %}{{ mob_video }}{% endif %}"
    data-mob-video="{% if mob_video%}{{ mob_video }}{% else %}{{ pc_video }}{% endif %}">
  </video>
  <video
    loop playsinline webkit-playsinline {{ autoplay }} {{ muted }}
    poster="{{ mobile_poster | img_url: 'master' }}"
    class="as-video-mob w-100 h-100 object-fit-cover {{ class_name }} d-md-none d-block"
    data-pc-video="{% if pc_video %}{{ pc_video }}{% else %}{{ mob_video }}{% endif %}"
    data-mob-video="{% if mob_video%}{{ mob_video }}{% else %}{{ pc_video }}{% endif %}">
  </video>
</lazy-video>
